<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>后端管理</title>
    <meta name="referrer" content="no-referrer"/>
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet">
    <link th:href="@{/css/blog.css}" rel="stylesheet">
    <link th:href="@{/css/adminblog.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.0.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<!--    <script type="text/javascript" th:src="@{/css/bootstrap-3.3.7-dist/js/npm.js}"></script>-->
</head>
<body style="background-color: #F2F2F2">
<div th:fragment="adminheader">
    <nav class="navbar navbar-inverse m-padded-tb-mimi">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Blog</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a th:href="@{/admin/adminblog}"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页</a></li>
                    <li><a th:href="@{/admin/types}"><span class="glyphicon glyphicon-tint" aria-hidden="true"></span>分类</a></li>
                    <li><a th:href="@{/admin/tags}"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span>标签</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <img th:src="@{/image/pikaqiu.jpg}" class="img-circle avatar" style="height: 25px;width: 25px;">&nbsp;
                        <span th:text="${session.user.username}"></span>
                        <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a th:href="@{/admin/logout}">注销</a></li>
                            <li><a th:href="@{/}" target="_blank">前端首页</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<nav class="navbar m-padded-tb-mimi m-a-padded">
    <div class="container">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a th:href="@{/admin/admininput}">发布</a></li>
                <li><a th:href="@{/admin/adminblog}">列表</a></li>
            </ul>
        </div>
    </div>
</nav>
<div>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <form>
                    <input type="hidden" name="page">
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <input type="text" name="title" class="form-control" placeholder="标题">
                            </div>
                        </div>
                        <div class="col-xs-3">
                            <div class="form-group">
                                <select class="form-control" id="exampleFormControlSelect1" name="typeId">
                                    <option value=""></option>
                                    <option th:each="type : ${types}" th:value="${type.id}" th:text="${type.name}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            <div class="form-group">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="recommend" name="recommend">
                                    <label class="form-check-label" for="recommend" style="font-size: 24px">
                                        推荐
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-1">
                            <div class="form-group">
                                <button id="search-btn" type="button" class="btn btn-primary">搜索</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div id="table-container">
            <div class="panel panel-default">
                <div class="panel-body">
                    <table th:fragment="blogList" class="table table-hover table-bordered">
                        <thead class="thead-dark">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">标题</th>
                            <th scope="col">类型</th>
                            <th scope="col">推荐</th>
                            <th scope="col">状态</th>
                            <th scope="col">更新时间</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="blog,iterStat : ${page.content}">
                            <th scope="row" th:text="${iterStat.count}"></th>
                            <td th:text="${blog.title}"></td>
                            <td th:text="${blog.type.name}"></td>
                            <td th:text="${blog.recommend} ? '是' : '否'"></td>
                            <td th:text="${blog.published} ? '发布' : '草稿'"></td>
                            <td th:text="${blog.updateTime}"></td>
                            <td>
                                <a class="btn btn-info btn-xs" href="#" th:href="@{/admin/{id}/adminupdate(id=${blog.id})}" role="button" >编辑</a>
                                <a class="btn btn-danger btn-xs" href="#" th:href="@{/admin/{id}/delete(id=${blog.id})}" role="button">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <th colspan="6">
                                <nav aria-label="Page navigation" th:if="${page.totalPages}>1">
                                    <ul class="pager">
                                        <li class="previous">
                                            <a onclick="page(this)" th:attr="data-page=${page.number}-1" th:unless="${page.first}"><span aria-hidden="true">&larr;</span>上一页</a>
                                        </li>
                                        <li>
                                            第 <span th:text="${page.number}+1"></span> 页  /
                                            总页数 <span th:text="${page.totalPages}"></span>
                                        </li>
                                        <li class="next">
                                            <a onclick="page(this)" th:attr="data-page=${page.number}+1" aria-label="Next" th:unless="${page.last}">下一页<span aria-hidden="true">&rarr;</span></a>
                                        </li>
                                    </ul>
                                </nav>
                            </th>
                            <th>
                                <a class="btn btn-info btn-sm" href="#" th:href="@{/admin/admininput}" role="button" style="margin-top: 15px">新增</a>
                            </th>
                        </tr>
                        </tfoot>
                    </table>

                    <div class="alert alert-success alert-dismissible" role="alert" th:unless="${#strings.isEmpty(message)}">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>提示：</strong><span th:text="${message}">恭喜，操作成功！</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div th:fragment="adminfooter">
    <footer class="navbar navbar-inverse">
        <div class="container">
            <div class="row m-footer-padded">
                <div class="col-md-3">
                    <a href="#">
                        <img th:src="@{/image/2630208719.png}" class="thumbnail" style="width: 100px;height: 100px;margin: 0 auto"/>
                    </a>
                </div>
                <div class="col-md-3  m-opacity" id="newBlog-container">
                    <div class="navbar-header" style="color: white;text-align: center" th:fragment="newBlogList">
                        <h4 style="color: white;">最新博客</h4>
                        <p th:each="blog : ${newBlogs}" style="text-align: center">
                            <a th:href="@{/head/blog/{id}(id = ${blog.id})}" target="_blank" th:text="${blog.title}" style="color: white">
                            </a>
                        </p>

                    </div>
                </div>
                <div class="col-md-3  m-opacity">
                    <div class="navbar-header" style="color: white;text-align: center">
                        <h4 style="color: white">联系我</h4>
                        <p>QQ邮箱 : 2630208719@qq.com</p>
                        <p>QQ : 2630208719</p>
                    </div>
                </div>
                <div class="col-md-3  m-opacity">
                    <div class="navbar-header" style="color: white;text-align: center">
                        <h4 style="color: white">Blog</h4>
                        <p>这是我的个人博客，会分享编程、写作、思考相关的内容、希望能对大家有帮助..</p>
                    </div>
                </div>
            </div>
            <br>
            <div class="m-opacity" style="text-align: center;color: white">
                <p>LeiYao : 2020-2021</p>
            </div>
        </div>
    </footer>
</div>
<script type="text/javascript">
    $('.dropdown-toggle').dropdown()

    function page(obj) {
        // $("[name='page']").val(0);
        $("[name='page']").val($(obj).data("page"))
        loaddate();
    }
    $("#search-btn").click(function () {
        $("[name='page']").val(0)
        loaddate();
    })
    function loaddate() {
        $("#table-container").load(/*[[@{admin/adminblog/search}]]*/"/admin/adminblog/search",{
            title : $("[name='title']").val(),
            typeId : $("[name='typeId']").val(),
            recommend : $("[name='recommend']").prop("checked"),
            page : $("[name='page']").val()
        })
    }
</script>

<script type="text/javascript">
    $("#newBlog-container").load(/*[[@{/footer/newBlog}]]*/"/footer/newBlog")
</script>
</body>
</html>